<template>
  <div class="drag">
    <div class="content">
      <div class="box-wrapper" ref="boxWrapper">
        <ul class="item-list">
            <el-tooltip v-for="(item,index) in dragItems" class="item" effect="light" placement="top-start" tag="li">
              <div slot="content">
                姓名：{{item.name}}
                <br>
                年龄：{{item.age}}
              </div>
              <p>
               {{item.name}}
             </p>
            </el-tooltip>
        </ul>
      </div>
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="拖曳"
            width="55">
            <template slot-scope="scope">
              <i class="iconfont icon-tuodong"
                 @dragstart.prevent
                 @mousedown="dragDown(scope.$index,$event)"
              ></i>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <a @click="del(scope.$index)">删除</a>
            </template>
          </el-table-column>
          <div slot="empty">
            <i class="iconfont icon-bukaixin"></i> 暂无数据
          </div>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import DragItem from 'base/drag-item/drag-item'
  import Vue from 'Vue'
  import Drag from 'base/drag-item/drag'

  export default {
    methods: {
      del(index) {
        this.$set(this.tableData, index , {})
      },
      dragDown(index, e) {
        let dragItem = new Drag({
          startPos: {
            x: e.clientX,
            y: e.clientY
          },
          row: this.tableData[index],
          onDragUp: this.dragUp
        })
      },
      dragUp(e, row) {
        const {clientX: x,clientY : y} = e
        // 鼠标落点在div内
        if (this._isIn({x, y}, this.$refs.boxWrapper)) {
          this.dragItems.push(row)
        }
      },
      delRow(index) {
        this.dragItems.splice(index, 1)
      },
      _isIn({x, y}, el) {
        const position = el.getBoundingClientRect()
        return x > position.left && x < position.left + position.width && y > position.top && y < position.top + position.height
      }
    },
    computed: {},
    data() {
      return {
        tableData: [
          {
            id: 1,
            name: '张凯华',
            age: 18
          },
          {
            id: 2,
            name: '孟星',
            age: 20
          }
        ],
        dragItems: []
      }
    },
    components: {}
  }
</script>

<style lang="stylus" scoped>
  .drag
    .content
      display flex
      .box-wrapper
        flex 0 0 30%
        height 50vh
        background #fff
        .item-list
          padding 10px
          display flex
          flex-wrap wrap
          .item
            position relative
            padding 20px
            box-sizing border-box
            width 30%
            margin 5px
            background #fff
            z-index 99
            box-shadow 0 0 8px #ddd
            .close
              cursor pointer
              padding 5px
              position absolute
              top 5px
              right 5px
              &:hover
                i
                 color red
              i
                font-size 22px
      .table-wrapper
        flex 0 0 60%
        margin-left 5%
        .icon-tuodong
          cursor pointer
          font-size 25px
          color black
          &:hover
            color red
</style>
